<template>
	<div>
		<el-row>
			<el-col :span="24">
				<el-card class="card-image" :style="`background-image: url('/images/幻灯片3.png');`" shadow="hover">
				</el-card>
			</el-col>
		</el-row>
		<div style="height: 20px;"></div>
		<el-row :gutter="20">
			<el-col :span="12">
				<el-card style="height: auto;" shadow="hover">
					<template #header>
						<div class="flex-space-between">
							<div class="left">
								<el-text style="color: #303133;font-size: 16px;">
									RFM模型介绍
								</el-text>
							</div>
							<div class="right">
								<el-tooltip placement="top" effect="light" content="启用查看原始数据">
									<div class="my-a">
										<el-icon color="#676967">
											<Position />
										</el-icon>
									</div>
								</el-tooltip>
								<el-tooltip placement="top" effect="light" content="更多">
									<div class="my-a">
										<el-icon color="#676967">
											<MoreFilled />
										</el-icon>
									</div>
								</el-tooltip>
							</div>
						</div>
					</template>
					<!--  -->
					<div>
						<div style="font-weight: bold;padding-bottom: 6px;">
							RFM模型，是由美国数据库营销研究所Arthur Hughes提出来的，是一种专门用来研究用户结构的方法理论，该模型分为R、F、M三个维度，分别是：
						</div>
						<div style="font-weight: bold;padding-bottom: 6px;">
							最近一次消费的时间(Recency)
						</div>
						<div style="padding-bottom: 6px;">
							该维度指的是最近一次消费时间间隔(R), 也就是上一次消费的时间间隔，该值越小客户价值越高，这是因为消费间隔越短的客户越有可能产生二次消费。
						</div>
						<div style="font-weight: bold;padding-bottom: 6px;">
							某段时间内消费频率次数(Frequency)
						</div>
						<div style="padding-bottom: 6px;">
							消费频次(F)，即客户的下单数量，体现了客户的购买频率，购买频次越高，此客户价值越高。
						</div>
						<div style="font-weight: bold;padding-bottom: 6px;">
							某段时间消费的总金额(Monetary)
						</div>
						<div style="padding-bottom: 6px;">
							消费金额(M)这个从字面意思即可知道，用户的消费金额越高，用户的消费能力越强，那么自然用户的价值也就越高。
						</div>
					</div>
					<template #footer>
						<div style="cursor: pointer;">
							<el-text>
								查看详情
								<el-icon>
									<ArrowRight />
								</el-icon>
							</el-text>
						</div>
					</template>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card style="height: auto;" shadow="hover">
					<template #header>
						<div class="flex-space-between">
							<div class="left">
								<el-text style="color: #303133;font-size: 16px;">
									R（最近消费距离天数）
								</el-text>
							</div>
							<div class="right">
								<el-tooltip placement="top" effect="light" content="启用查看原始数据">
									<div class="my-a">
										<el-icon color="#676967">
											<Position />
										</el-icon>
									</div>
								</el-tooltip>
								<el-tooltip placement="top" effect="light" content="更多">
									<div class="my-a">
										<el-icon color="#676967">
											<MoreFilled />
										</el-icon>
									</div>
								</el-tooltip>
							</div>
						</div>
					</template>
					<!--  -->
					<div ref="echart1" style="height: 400px;"></div>
				</el-card>
			</el-col>
		</el-row>
		<!--  -->
		<div style="height: 20px;"></div>
		<el-row :gutter="20">
			<el-col :span="12">
				<el-card style="height: auto;" shadow="hover">
					<template #header>
						<div class="flex-space-between">
							<div class="left">
								<el-text style="color: #303133;font-size: 16px;">
									产品-销售排行
								</el-text>
							</div>
							<div class="right">
								<el-tooltip placement="top" effect="light" content="启用查看原始数据">
									<div class="my-a">
										<el-icon color="#676967">
											<Position />
										</el-icon>
									</div>
								</el-tooltip>
								<el-tooltip placement="top" effect="light" content="更多">
									<div class="my-a">
										<el-icon color="#676967">
											<MoreFilled />
										</el-icon>
									</div>
								</el-tooltip>
							</div>
						</div>
					</template>
					<!--  -->
					<div ref="echart2" style="height: 400px;"></div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card style="height: auto;" shadow="hover">
					<template #header>
						<div class="flex-space-between">
							<div class="left">
								<el-text style="color: #303133;font-size: 16px;">
									客户-销售排行
								</el-text>
							</div>
							<div class="right">
								<el-tooltip placement="top" effect="light" content="启用查看原始数据">
									<div class="my-a">
										<el-icon color="#676967">
											<Position />
										</el-icon>
									</div>
								</el-tooltip>
								<el-tooltip placement="top" effect="light" content="更多">
									<div class="my-a">
										<el-icon color="#676967">
											<MoreFilled />
										</el-icon>
									</div>
								</el-tooltip>
							</div>
						</div>
					</template>
					<!--  -->
					<div ref="echart3" style="height: 400px;"></div>
				</el-card>
			</el-col>
		</el-row>
		<!--  -->
		<div style="height: 20px;"></div>
		<el-row>
			<el-col :span="24">
				<el-card style="height: auto;" shadow="hover" class="my">
					<el-input v-model="input1" size="large" placeholder="搜索客户" :prefix-icon="Search" />
				</el-card>
			</el-col>
		</el-row>
		<!--  -->
		<div style="height: 20px;"></div>
		<el-row :gutter="20">
			<el-col :span="24">
				<el-card style="height: auto;" shadow="hover" class="my">
					<template #header>
						<div class="flex-space-between">
							<div class="left">
								<el-text style="color: #303133;font-size: 16px;">
									客户RFM模型
								</el-text>
							</div>
							<div class="right">
								<el-tooltip placement="top" effect="light" content="启用查看原始数据">
									<div class="my-a">
										<el-icon color="#676967">
											<Position />
										</el-icon>
									</div>
								</el-tooltip>
								<el-tooltip placement="top" effect="light" content="更多">
									<div class="my-a">
										<el-icon color="#676967">
											<MoreFilled />
										</el-icon>
									</div>
								</el-tooltip>
							</div>
						</div>
					</template>
					<!--  -->
					<el-table :data="tableData" border style="width: 100%;margin-top: -1px;" class="my">
						<el-table-column prop="date" label="签约日期" />
						<el-table-column prop="count" label="签约总额" />
						<el-table-column prop="cost" label="产品成本" />
						<el-table-column prop="gross" label="毛利率" />
						<el-table-column prop="grossAll" label="综合毛利率" />
					</el-table>
				</el-card>
			</el-col>
		</el-row>
		<div style="height: 20px;"></div>
		<el-row>
			<el-col :span="24">
				<el-card class="card-image" :style="`background-image: url('/images/客户画像.png');`" shadow="hover">
				</el-card>
			</el-col>
		</el-row>
		<div style="height: 20px;"></div>
		<el-row :gutter="20">
			<el-col :span="12">
				<el-card style="height: 104px;" shadow="hover">
					<div class="top">
						<el-text>
							客户总数
						</el-text>
					</div>
					<div class="body">
						<el-tooltip placement="top">
							<template #content>
								16
							</template>
							<el-text>
								16
							</el-text>
						</el-tooltip>
					</div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card style="height: 104px;" shadow="hover">
					<div class="top">
						<el-text>
							本月新增客户
						</el-text>
					</div>
					<div class="body">
						<el-tooltip placement="top">
							<template #content>
								2
							</template>
							<el-text>
								2
							</el-text>
						</el-tooltip>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<!--  -->
		<div style="height: 20px;"></div>
		<el-row :gutter="20">
			<el-col :span="12">
				<el-row :gutter="20">
					<el-col :span="12">
						<el-card style="height: auto;" shadow="hover">
							<template #header>
								<div class="flex-space-between">
									<div class="left">
										<el-text style="color: #303133;font-size: 16px;">
											客户等级分布
										</el-text>
									</div>
									<div class="right">
										<el-tooltip placement="top" effect="light" content="启用查看原始数据">
											<div class="my-a">
												<el-icon color="#676967">
													<Position />
												</el-icon>
											</div>
										</el-tooltip>
										<el-tooltip placement="top" effect="light" content="更多">
											<div class="my-a">
												<el-icon color="#676967">
													<MoreFilled />
												</el-icon>
											</div>
										</el-tooltip>
									</div>
								</div>
							</template>
							<div ref="echart4" style="height: 196px;"></div>
						</el-card>
					</el-col>
					<el-col :span="12">
						<el-card style="height: auto;" shadow="hover">
							<template #header>
								<div class="flex-space-between">
									<div class="left">
										<el-text style="color: #303133;font-size: 16px;">
											客户来源分布
										</el-text>
									</div>
									<div class="right">
										<el-tooltip placement="top" effect="light" content="启用查看原始数据">
											<div class="my-a">
												<el-icon color="#676967">
													<Position />
												</el-icon>
											</div>
										</el-tooltip>
										<el-tooltip placement="top" effect="light" content="更多">
											<div class="my-a">
												<el-icon color="#676967">
													<MoreFilled />
												</el-icon>
											</div>
										</el-tooltip>
									</div>
								</div>
							</template>
							<!--  -->
							<div ref="echart5" style="height: 196px;"></div>
						</el-card>
					</el-col>
				</el-row>
			</el-col>
			<el-col :span="12">
				<el-card style="height: auto;" shadow="hover">
					<template #header>
						<div class="flex-space-between">
							<div class="left">
								<el-text style="color: #303133;font-size: 16px;">
									客户地域分布
								</el-text>
							</div>
							<div class="right">
								<el-tooltip placement="top" effect="light" content="启用查看原始数据">
									<div class="my-a">
										<el-icon color="#676967">
											<Position />
										</el-icon>
									</div>
								</el-tooltip>
								<el-tooltip placement="top" effect="light" content="更多">
									<div class="my-a">
										<el-icon color="#676967">
											<MoreFilled />
										</el-icon>
									</div>
								</el-tooltip>
							</div>
						</div>
					</template>
					<!--  -->
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import { ArrowRight, Position, MoreFilled, Search } from '@element-plus/icons-vue';
	import * as echarts from 'echarts';

	const echart1 = ref();
	const echart2 = ref();
	const echart3 = ref();
	const echart4 = ref();
	const echart5 = ref();
	const echartOption1 = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#6a7985'
				}
			}
		},
		dataset: {
			source: [
				[522.8, 'BELL贝尔温3*5米|在库734件', 'BELL贝尔温3*5米|在库734件'],
				[456.8, 'naturehike挪客3*4米|在库889件', 'naturehike挪客3*4米|在库889件'],
				[212.4, '克米特椅中号│在库692件', '克米特椅中号│在库692件'],
				[142.1, '克米特椅大号│在库681件', '克米特椅大号│在库681件'],
				[140.3, '松木蛋卷桌大号1.2m|在库543件', '松木蛋卷桌大号1.2m|在库543件'],
				[312.8, '铝合金蛋卷桌大号1.2m |在库508盒', '铝合金蛋卷桌大号1.2m |在库508盒']
			]
		},
		grid: { containLabel: true },
		xAxis: { name: '' },

		legend: {
			bottom: 0,
			data: ['消费次数(订单数)']
		},
		yAxis: { type: 'category' },
		series: [
			{
				name: '消费次数(订单数)',
				type: 'bar',
				color: '#5d98a0',
				symbol: 'circle',
				areaStyle: {
					color: '#ebf4ef'
				},
				label: {
					show: true,
					position: 'right',
					color: '#5d98a0'
				},
				encode: {
					// Map the "amount" column to X axis.
					x: 'amount',
					// Map the "product" column to Y axis
					y: 'product'
				}
			}
		]
	};
	const echartOption2 = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#6a7985'
				}
			}
		},
		dataset: {
			source: [
				[6.8, '海纳物流科技有限公司', '海纳物流科技有限公司'],
				[15.8, '创想教育科技有限公司', '创想教育科技有限公司'],
				[15.8, '大禹文化传媒有限公司', '大禹文化传媒有限公司'],
				[19, '酷酷酷', '酷酷酷'],
				[28.4, '绿色家居装饰有限公司', '绿色家居装饰有限公司'],
				[28.5, '艾默生电器有限公司', '艾默生电器有限公司'],
				[42.3, '飞跃广告传媒有限公司', '飞跃广告传媒有限公司'],
				[48.8, '泛海国际公司', '泛海国际公司'],
				[68.2, '星际科技有限公司', '星际科技有限公司'],
				[110.8, '卓中商务', '卓中商务'],
				[167.2, '宜居生态园林有限公司', '宜居生态园林有限公司'],
				[168.4, '泛海国际', '泛海国际'],
				[186.7, '精英人才服务有限公司', '精英人才服务有限公司'],
				[208.7, '融创房地产开发有限公司', '融创房地产开发有限公司'],
				[674.3, '事驰科技', '事驰科技'],
			]
		},
		grid: { containLabel: true },
		xAxis: { name: '' },
		legend: {
			bottom: 0,
			data: ['订单金额(求和)']
		},
		yAxis: { type: 'category' },
		series: [
			{
				name: '订单金额(求和)',
				type: 'bar',
				color: '#3c85b5',
				areaStyle: {
					color: '#ebf4ef'
				},
				label: {
					show: true,
					position: 'right',
					color: '#3c85b5'
				},
				encode: {
					// Map the "amount" column to X axis.
					x: 'amount',
					// Map the "product" column to Y axis
					y: 'product'
				}
			}
		]
	};
	const echartOption3 = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#6a7985'
				}
			}
		},
		dataset: {
			source: [
				[6.8, '海纳物流科技有限公司', '海纳物流科技有限公司'],
				[15.8, '创想教育科技有限公司', '创想教育科技有限公司'],
				[15.8, '大禹文化传媒有限公司', '大禹文化传媒有限公司'],
				[19, '酷酷酷', '酷酷酷'],
				[28.4, '绿色家居装饰有限公司', '绿色家居装饰有限公司'],
				[28.5, '艾默生电器有限公司', '艾默生电器有限公司'],
				[42.3, '飞跃广告传媒有限公司', '飞跃广告传媒有限公司'],
				[48.8, '泛海国际公司', '泛海国际公司'],
				[68.2, '星际科技有限公司', '星际科技有限公司'],
				[110.8, '卓中商务', '卓中商务'],
				[167.2, '宜居生态园林有限公司', '宜居生态园林有限公司'],
				[168.4, '泛海国际', '泛海国际'],
				[186.7, '精英人才服务有限公司', '精英人才服务有限公司'],
				[208.7, '融创房地产开发有限公司', '融创房地产开发有限公司'],
				[674.3, '事驰科技', '事驰科技'],
			]
		},
		grid: { containLabel: true },
		xAxis: { name: '' },
		legend: {
			bottom: 0,
			data: ['订单金额(求和)']
		},
		yAxis: { type: 'category' },
		series: [
			{
				name: '订单金额(求和)',
				type: 'bar',
				color: '#3c85b5',
				areaStyle: {
					color: '#ebf4ef'
				},
				label: {
					show: true,
					position: 'right',
					color: '#3c85b5'
				},
				encode: {
					// Map the "amount" column to X axis.
					x: 'amount',
					// Map the "product" column to Y axis
					y: 'product'
				}
			}
		]
	};
	const echartOption4 = {
		tooltip: {
			trigger: 'item',
			formatter: (e : any) => {
				return `${e.name}<br>客户数 ${e.value}<br>占比 ${e.percent}%`;
			}
		},
		legend: {
			bottom: 0,
			type: 'scroll',
		},
		series: [
			{
				type: 'pie',
				radius: '50%',
				data: [
					{ value: 3, name: '一级客户', itemStyle: { color: '#b3c9e3' } },
					{ value: 4, name: '二级客户', itemStyle: { color: '#6c9ec1' } },
					{ value: 9, name: '三级客户', itemStyle: { color: '#7594b9' } },
				],
				selectedMode: 'single',
			}
		]
	};
	const echartOption5 = {
		tooltip: {
			trigger: 'item',
			formatter: (e : any) => {
				return `${e.name}<br>客户数 ${e.value}<br>占比 ${e.percent}%`;
			}
		},
		legend: {
			bottom: 0,
			type: 'scroll',
		},
		series: [
			{
				type: 'pie',
				radius: '50%',
				data: [
					{ value: 2, name: '其他', itemStyle: { color: '#2e4555' } },
					{ value: 4, name: '广告系统', itemStyle: { color: '#4b6374' } },
					{ value: 6, name: '朋友推荐', itemStyle: { color: '#a0c9e4' } },
					{ value: 2, name: '线上推广', itemStyle: { color: '#6e8bad' } },
					{ value: 2, name: '线下地推', itemStyle: { color: '#3e84b4' } },
				],
				selectedMode: 'single',
			}
		]
	};
	const tableData = [
		{
			date: '2023年08月',
			count: '200,000',
			cost: '15,000',
			gross: '50,000',
			grossAll: '25%'
		}, {
			date: '2023年07月',
			count: '3,094,800',
			cost: '1,493,400',
			gross: '1,601,400',
			grossAll: '51.7%'
		}, {
			date: '2023年08月',
			count: '200,000',
			cost: '15,000',
			gross: '50,000',
			grossAll: '25%'
		},];
	//
	onMounted(() => {
		initEchart();
	});

	//
	const initEchart = () => {
		// 基于准备好的dom，初始化echarts实例
		var myChart1 = echarts.init(echart1.value);
		var myChart2 = echarts.init(echart2.value);
		var myChart3 = echarts.init(echart3.value);
		var myChart4 = echarts.init(echart4.value);
		var myChart5 = echarts.init(echart5.value);
		// 绘制图表
		myChart1.setOption(echartOption1);
		myChart2.setOption(echartOption2);
		myChart3.setOption(echartOption3);
		myChart4.setOption(echartOption4);
		myChart5.setOption(echartOption5);
	}
</script>
<style>
	@import '../../assets/css/index.css';
</style>
<style scoped lang="scss">
	@import '../../assets/css/index.scss';
</style>